<template>
  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>风采管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/news/listOfCommerce">商会风采列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	  </div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商会风采列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="商会名 风采标题 介绍"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary" 
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>
      
      <el-table :data="newsList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          label="商会"
          width="300">
          <template slot-scope="scope">
            <span>{{scope.row.commerce_name}}</span>
            <br>
            <span>{{scope.row.commerce_address}}</span>
          </template>
        </el-table-column>


        <el-table-column
          label="标题"
          prop="title">
        </el-table-column>

        <el-table-column
          label="介绍"
          prop="intro">
        </el-table-column>
        
        <el-table-column
          label="封面">
          <template slot-scope="scope">
            <img style="width: 50px; margin: 0 5px 5px 0;" v-for="item in scope.row.coverList" :src="item">
          </template>
        </el-table-column>

        <el-table-column
          label="连接"
          prop="url">
        </el-table-column>

        <el-table-column
          label="发布时间"
          prop="date_time"
          sortable="custom">
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <a class="" :href="'#/news/detailOfCommerce/' + scope.row.id" target="_blank">
              <el-button
              plain 
              size="mini" 
              >详情</el-button>
            </a>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>	

  </div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'

  import Api from '../../api/Api'
  import NewsApi from '../../api/NewsApi'

  import { mapGetters } from 'vuex'

  export default {
  	components: {
  		NcButton, SubmitButton
  	},
  	data(){
  	  return {
  	  	
        newsList: [],

        page: {
          keyWord: '',
		  columnProp: '',
		  columnOrder: '',
          pageNum: 1,
          pageSize: 10
        },

        searchUrl: NewsApi.URL_LIST_COMMERCE,
  	  }
  	},
  	computed: {
  	  ...mapGetters(['hasPerm'])
  	},
  	created(){
  	  this.getPage();

      //this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
  	},
    beforeDestroy: function(){
      //this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
  	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
      searchCB(json){
        this.newsList = json.list;
        this.setPage(json);
      },
      getPage(){
        NewsApi.listOfCommerce(this.page, json=>{
          this.newsList = json.list;
          this.setPage(json);
        });  
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
  	}
  }
</script>
